import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import type { FC } from 'react';

import styles from './index.less';

type TProps = {
  required?: boolean;
  title: string;
  subTitle?: string;
  toolTip?: string;
};

const FormLabelTip: FC<TProps> = (props) => {
  const { title, subTitle, toolTip, required } = props;
  return (
    <div className={styles.titleWrap}>
      {required ? <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span> : null}
      <span className={styles.title}>{title}</span>
      {toolTip ? (
        <Tooltip title={toolTip}>
          <QuestionCircleOutlined className={styles.icon} />
        </Tooltip>
      ) : null}
      {subTitle ? <span className={styles.subTitle}>{subTitle}</span> : null}
    </div>
  );
};

export default FormLabelTip;
